import React from 'react'
import { Transition } from 'react-transition-group';
import './index.scss'

const noop = () => {}

export const Popup = (props) => {
  /* 内容 */
  const content = (
    <div className={`popup__content ${props.popupType === 2 && 'popup__content--drawer'}`}>
      {/* 关闭按钮 */}
      {props.needCloseBtn && (
        <div className="popup__close-btn" onClick={props.handleClose}>
          <i></i>
        </div>
      )}

      {props.content}
    </div>
  )

  return (
    <Transition in={props.status} timeout={500} appear={true} unmountOnExit={true}>
      {(state) => (
        <section className={`popup popup--${state} ${props.popupType === 2 && 'popup--drawer'}`}>
          {/* mask */}
          <div className="popup__mask" onClick={props.needMaskClose ? props.handleClose : noop}></div>

          <div className={`popup__main ${props.popupType === 2 && 'popup__main--drawer'}`}>
            {/* 头部装饰 */}
            {props.decorate && <div className="popup__decorate">{props.decorate}</div>}

            {/* 立体边框 */}
            {props.popupType === 1 && props.needStereoscopic ? (
              <div className="popup__stereoscopic">{content}</div>
            ) : (
              content
            )}
          </div>
        </section>
      )}
    </Transition>
  )
}

Popup.defaultProps = {
  // options
  show: false,
  // 1 => popup, 2 => drawer
  popupType: 1,
  needCloseBtn: false,
  needMaskClose: false,
  needStereoscopic: false,

  // event
  handleClose: noop,

  // Element
  decorate: <></>,
  content: <></>,
}

export default Popup
